<template>
	<view class="logistics-box">
		<view class="logistics-top fz15 mb10">
			<view class="mb10">
				快递公司：{{express_delivery_type}}
			</view>
			<view class="flex align-c">
				运单编号：{{order_id}}
				<view class="copy-btn ml5 fz10" @click="copyOrderId">
					复制
				</view>
			</view>
		</view>
		<view class="logistics-list">
			<view class="fz15 bold mb15">
				物流追踪
			</view>
			<view class="">
				<u-time-line>
					<u-time-line-item v-for="(item,index) in logistics_list">
						<template v-slot:node>
							<image v-if="index == 0" style="width: 20rpx;height: 20rpx;" src="../../../static/my/start_ellipse.png" mode=""></image>
							<image v-else style="width: 20rpx;height: 20rpx;" src="../../../static/my/solid_ellipse.png" mode=""></image>
						</template>
						<template v-slot:content>
							<view class="c9" :style="{color:index===0 ? '#B27715' : ''}">
								<view class="fz13 mb5">
									{{item.description}}
								</view>
								<view class="fz11">
									{{item.time}}
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '12546356212345', // 快递单号
				express_delivery_type: '中通快递', // 快递公司
				logistics_list: [
					{
						time: '2021-05-15     15:30',
						description: '【南京市】已经签收。感谢您此次抢购，期待再次为您服务。'
					},
					{
						time: '2021-05-25   10:08:21',
						description: '【南京市】快递已经到达【秦淮区】'
					},
					{
						time: '2021-05-24      01:11:27',
						description: '上海市公司已发出，下一站秦淮区'
					},
					{
						time: '2021-05-23      23:18:47',
						description: '上海市公司已打包'
					},
					{
						time: '2021-05-23      21:43:44',
						description: '包裹正在等待揽收'
					},
					{
						time: '2021-05-23      21:42:21',
						description: '您的订单已验货完成'
					},
					{
						time: '2021-05-22      23:45:50',
						description: '您已提交订单，请等待系统确认'
					}
				],
			}
		},
		mounted() {
			
		},
		methods: {
			// 点击复制订单号
			copyOrderId() {
				uni.setClipboardData({
					data: this.order_id,
					success: function () {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.logistics-box{
	background-color: #F7F7F7;
	padding-top: 20rpx;
	box-sizing: border-box;
	height: 100vh;
	.logistics-top{
		background-color: #ffffff;
		padding: 30rpx;
		.copy-btn{
			width: 60rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			background: linear-gradient(1deg,#fff2dc 0%, #ffefcb 100%);
			color: #B27715;
			border-radius: 5rpx;
		}
	}
	.logistics-list{
		background-color: #ffffff;
		padding: 34rpx 30rpx;
	}
}
</style>